<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>练习：百度搜索</title>
	<style type="text/css">
		.current{
			background-color: #ccc;
		}
	</style>
	<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javascript" src="js/vue-resource.min.js"></script>
	<script type="text/javascript">
		window.onload=function(){
			new Vue({
				el:'.container',
				data:{
					keyword:'',
					myData:[],
					nowIndex:-1 //当前选中项的索引
				},
				methods:{
					getData(e){
						//如果按方向键上和下，则不发请求
						if(e.keyCode==38 || e.keyCode==40){
							return;
						}
						this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
							params:{
								wd:this.keyword
							},
							jsonp:'cb' //百度使用的jsonp参数名为cb，所以需要修改默认的callback
						}).then(resp =>{
							// console.log(resp.data.s);
							this.myData=resp.data.s;

						});
					},
					changeUp(){
						this.nowIndex--;
						this.keyword=this.myData[this.nowIndex];
						if(this.nowIndex==this.myData.length){
								this.nowIndex=this.myData.length-1;
						}
					},
					changeDown(){//选中下一条
						this.nowIndex++;
						this.keyword=this.myData[this.nowIndex];
						if(this.nowIndex==-2){
								this.nowIndex=-1;
						}
					}
				}
			});
		}
	</script>
</head>
<body>
	<div class="container">
		百度搜索
		<input type="text"  v-model="keyword" @keyup="getData($event)" @keydown.down="changeDown" @keydown.up.prevent="changeUp">
		<ul>
			<li v-for="(value,index) in myData" :class="{current:index==nowIndex}">
				{{value}}
			</li>
		</ul>
		<p v-show="myData.length==0">暂时无数据显示..</p>
	</div>
</body>
</html>